<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-06-30 17:48:25
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-12-09 22:47:44
 * @FilePath: \dance\pages\me\teacherWindow.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="teacher">
    <view class="teacher-title">
      <uv-avatar :src="headerpic" size="178rpx" mode="aspectFill"></uv-avatar>
      <view class="teacher-title-info">
        <text class="teacher-title-info-name" selectable user-select>
          {{ httpData?.teacher?.username }}
        </text>
        <text class="teacher-title-info-num" selectable user-select>去卡号：{{ state.vuex_user.serial }} </text>
      </view>
    </view>
    <view class="teacher-other">
      <view class="teacher-other-item">
        <text class="title">擅长舞种：</text>
        <view class="dances">
          <view v-for="(item, index) in dances" :key="index" class="dances-item">
            {{ item }}
          </view>
        </view>
      </view>
      <view class="teacher-other-item content-text">
        {{ httpData.teacher?.description?.content }}
      </view>
    </view>
    <view class="teacher-button">
      <view class="button" @click="onGoRegister">编辑资料</view>
      <uv-icon name="icon1" custom-prefix="custom-icon" color="#000" size="65rpx" @click="onClickQrcode"></uv-icon>
      <view class="item">
        <uv-line direction="col" color="#b1b1b1" margin="0 0" length="34.884rpx"></uv-line>
        <button open-type="share" class="reset-button item-button">分享</button>
      </view>
    </view>
    <view class="teacher-oper">
      <view class="teacher-oper-item" @click="onPushVideo">发布视频</view>
      <!-- <view class="teacher-oper-item" @click="onGoCourseManage">课程管理</view> -->
      <view class="teacher-oper-item teacher-oper-other" @click="onGoOrder">我的订单</view>
    </view>
    <view style="margin: 0 26.163rpx">
      <uv-line color="#b1b1b1" margin="45.349rpx 0 17.442rpx 0"></uv-line>
    </view>
    <view class="teacher-tabs">
      <view class="box">
        <uv-tabs
          :list="list"
          lineWidth="139.535rpx"
          :current="current"
          lineHeight="4"
          lineColor="#FF7A66"
          :activeStyle="{
            color: '#000',
            fontSize: '34.884rpx',
            fontWeight: 'bold'
          }"
          :inactiveStyle="{
            fontSize: '34.884rpx',
            color: '#959595'
          }"
          @change="onTabsChange"
          itemStyle="width: 46%;margin-bottom: 4px;box-sizing: border-box; text-align: center; height: 34px; color: #fff;"
        >
        </uv-tabs>
      </view>
      <view class="teacher-oper-item" @click="onGoCollect">收藏</view>
    </view>
    <view class="content">
      <teacherLesson :current="current" ref="lessonRef" v-if="current === 0" />
      <teacherVideo :current="current" ref="teacherRef" v-else-if="current === 1" />
    </view>
  </view>
  <uv-toast ref="toastRef"></uv-toast>
  <!-- 券码弹窗 -->
  <uv-modal ref="modalRef" title="" :closeOnClickOverlay="false">
    <view class="modal">
      <view>去卡号：</view>
      <view class="modal-code">{{ state.vuex_user.serial }}</view>
      <view class="flex flex-center mt-20">
        <uv-qrcode ref="qrcodeRef" size="200px" :value="modalQrcodeVal"></uv-qrcode>
      </view>
    </view>
  </uv-modal>
</template>

<script setup>
  import { ref, reactive, computed, nextTick, watch, getCurrentInstance } from 'vue';
  import { defaultImages, checkStatus } from '@/common/js/global.js';
  import teacherLesson from './components/teacherLesson.vue';
  import teacherVideo from './components/teacherVideo.vue';
  import teacherCollect from './components/teacherCollect.vue';
  import { toastFn } from '@/common/js/fn.js';
  import { onReachBottom, onShow, onReady } from '@dcloudio/uni-app';
  import store from '@/store/index.js';
  const instance = getCurrentInstance();
  const query = uni.createSelectorQuery().in(instance.proxy);
  const top = ref(0);
  let { state } = store;
  const list = [{ name: '课程' }, { name: '视频' }];
  let current = ref(0);
  let headerpic = computed(() => {
    return state.vuex_user.teacher.profilePhoto || defaultImages[2];
  });
  let dances = computed(() => {
    return (state.vuex_user.teacher?.dances || []).map(r => r.name);
  });
  // #region 操作上面的类目
  const onTabsChange = ({ index }) => {
    current.value = index;
  };
  // #endregion
  // 前往发布视频
  const onPushVideo = () => {
    uni.$uv.route({
      url: '/pages/me/pushVideo'
    });
  };
  // 前往课程管理；
  const onGoCourseManage = () => {
    uni.$uv.route({
      url: '/pages/me/courseManage'
    });
  };
  const onGoCollect = () => {
    uni.$uv.route({
      url: '/pages/collect/index'
    });
  };
  // 前往注册管理 字段通用
  const onGoRegister = () => {
    uni.$uv.route({
      url: '/pages/teacher/register',
      params: {
        isEdit: 1
      }
    });
  };
  // 滚动到底部触发
  let lessonRef = ref(),
    teacherRef = ref(),
    collectRef = ref();
  onReachBottom(() => {
    let e = [lessonRef, teacherRef, collectRef][current.value];
    e.value.sonChange();
  });
  const onGoOrder = () => {
    uni.navigateTo({
      url: '/pages/order/index'
    });
  };
  let toastRef = ref(),
    modalRef = ref(),
    qrcodeRef = ref(),
    modalQrcodeVal = ref();
  // 点击二维码
  const onClickQrcode = () => {
    modalQrcodeVal.value = JSON.stringify({
      serial: state.vuex_user.serial,
      isTeacher: 'yes'
    });
    modalRef.value.open();
    nextTick(() => {
      qrcodeRef.value.make();
    });
  };
  let httpData = ref({});
  watch(
    () => state.vuex_user,
    val => {
      httpData.value = val;
    },
    {
      immediate: true,
      deep: true
    }
  );
</script>

<style lang="scss" scoped>
  .teacher {
    height: 100%;
    font-size: 24.419rpx;
    overflow: auto;

    &-title {
      display: flex;
      font-size: 23rpx;
      margin-left: 37rpx;
      &-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-left: 34.884rpx;
        color: #959595;
        &-name {
          font-size: 34.884rpx;
          margin-bottom: 12.209rpx;
          color: #000;
          font-weight: 700;
        }
      }
    }
    &-other {
      font-size: 28rpx;
      margin: 55.814rpx 47.093rpx 104.651rpx 47.093rpx;
      &-item {
        display: flex;
        color: #959595;
        .title {
          white-space: nowrap;
        }

        .dances {
          display: flex;
          flex-wrap: wrap;
          color: #959595;
          &-item {
            font-size: 24.419rpx;
            background-color: #b1b1b1;
            height: 38rpx;
            line-height: 38rpx;
            box-sizing: border-box;
            color: #000;
            padding: 0 21rpx;
            border-radius: 24rpx;
            margin-right: 23rpx;
            margin-bottom: 17.442rpx;
          }
        }
      }
      .content-text {
        line-height: 41.86rpx;
      }
      &-item:first-child {
        margin-bottom: 38.414rpx;
      }
    }
    &-button {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 47.093rpx;
      box-sizing: border-box;
      margin-bottom: 45rpx;
      width: 100%;
      .button {
        border: 1px solid #959595;
        width: 191.86rpx;
        height: 64.535rpx;
        border-radius: 54.07rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #959595;
      }
      .item {
        display: flex;
        align-items: center;
        &-button {
          height: 51rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: $dance-main-color;
          font-size: 26.163rpx;
          margin-left: 48.837rpx;
        }
      }
    }
    &-oper {
      margin: 0 47.093rpx;
      display: flex;
      justify-content: space-between;
      &-item {
        width: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 65rpx;
        background-color: #000;
        border-radius: 19.186rpx;
        font-size: 27.907rpx;
        color: #fff;
      }
    }
    &-tabs {
      display: flex;
      margin: 0 47.093rpx;
      .box {
        width: 70%;
      }
    }
    &-buttons {
      margin-top: 24.419rpx;
      width: 100%;
      background-color: #fff;
      height: 109.884rpx;
      display: flex;
      color: rgba(149, 149, 149, 1);

      &-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon {
          margin-right: 17.442rpx;
        }
      }
    }
  }
  .content {
    box-sizing: border-box;
    position: relative;
    &-item {
      background-color: #1d1f24;
      width: 100%;
      position: absolute;
      top: 0;
      left: 100%;
      transition: all 0.3s;
      opacity: 0;
    }
    &-active {
      left: 0;
      opacity: 1;
    }
  }
  .dances {
    display: inline-flex;
    &-item {
      font-size: 24rpx;
      background-color: #b1b1b1;
      height: 38rpx;
      line-height: 38rpx;
      box-sizing: border-box;
      color: #000;
      padding: 0 21rpx;
      border-radius: 24rpx;
      margin-right: 23rpx;
    }
  }
  .modal {
    color: #1d1f24;
  }
</style>
